@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap');

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-family: 'Roboto Condensed', sans-serif;
}

#wrapper {
  display: none;
}

.background {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color:#1F2739;
  height: 700px;
  width: 1200px;
}

.background img {
  margin-left: 20px;
  margin-top: 20px;
  width: 447px;
  height: 127px;
}

.background #close {
  font-size: 40px;
  color: rgb(44, 54, 77);
  margin-left: 1%;
  margin-top: 41.2%;
}

.background #close:hover {
  transition: 200ms;
  color: rgb(63, 77, 110);
}


/* HOME MENU */

.background #home_menu {
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  height: 40%;
}

.background #home_menu button {
  position: relative;
  top: 55%;
  left: 28%;
  transform: translate(-50%, -50%);
  background-color: #0a51a1;
  border: none;
  color: white;
  font-size: 40px;
  width: 320px;
  height: 120px;
}

.background #home_menu button:hover {
  transition: 200ms;
  color: #042a55;
}

/* LIST MENU */

.background #list_menu {
  position: absolute;
  display: none;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 60%;
}

.background #list_menu #back {
  position: absolute;
  top: 105%;
  left: 8.165%;
  transform: translate(-50%, -50%);
  background-color: #0a51a1;
  border: none;
  color: white;
  font-size: 27px;
  width: 120px;
  height: 60px;
}

.background #list_menu #back:hover {
  transition: 200ms;
  color: #042a55;
}

.background #list_menu .table {
  display: inline-block;
  overflow-y: scroll;
  width: 100%;
  max-height:400px;
  margin-left: 12px;
}

.background #list_menu .table table {
  text-align: left;
  color: white;
  width: 100%;
  table-layout: fixed;
  display: table;
  border-spacing: 0px;
}

.background #list_menu .table tr {
  font-size: 25px;
}

.background #list_menu .table th {
  color: #185875;
  font-size: 16px;
  text-align: left;
}

.background #list_menu .table td, .background #list_menu .table th  {
  padding-bottom: 2%;
  padding-top: 2%;
  padding-left: 2%;  
  border: 1px solid #1F2739;
}

.background #list_menu .table td:nth-child(odd) {
  background-color: #323C50;
}

.background #list_menu .table td:nth-child(even) {
  background-color: #2C3446;
}

::-webkit-scrollbar {
  width: 10px;
}
 
::-webkit-scrollbar-track {
  background: transparent
}
 
::-webkit-scrollbar-thumb {
  background: rgb(20, 24, 36); 
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(20, 24, 36); 
}

/* JAIL MENU */

.background #jail_menu {
  position: absolute;
  display: none;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  height: 60%;
}

.background #jail_menu #back {
  position: absolute;
  top: 10%;
  left: 8%;
  transform: translate(-50%, -50%);
  background-color: #0a51a1;
  border: none;
  color: white;
  font-size: 27px;
  width: 120px;
  height: 60px;
}

.background #jail_menu #back:hover {
  transition: 200ms;
  color: #042a55;
}

.background #jail_menu #search {
  display: none;
}

.background #jail_menu form {
  margin-top: 120px;
  margin-left: 12px;
}

.background #jail_menu input {
  padding: 15px;
  font-size: 25px;
  background-color: #0a51a1;
  color: white;
  border: none;
}

.background #jail_menu ::placeholder {
  color: #042a55;
}

.background #jail_menu #search #result {
  position: absolute;
  display: none;
  font-size: 20px;
  color: rgb(0, 0, 0);
  top: 275px;
  left: 150px;
}

.background #jail_menu #time_reason {
  display: none;
  margin-top: 120px;
  margin-left: 12px;
}

@media only screen and (max-width: 1250px) {
  .container {
    width: 100%;
  }
}